<template>
  <div class="container">
    <el-row>
      <el-card>
        <div slot="header">
          <el-breadcrumb class="breadcrumb">
            <el-breadcrumb-item>商家编辑</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-form :model="basicInfoList" class="form" label-width="100px">

          <div>
            <div class="table-footer">
              <el-row>
                <el-col>基本信息</el-col>
              </el-row>
            </div>
            <div class="item-content">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="商家名称">
                    <el-input v-model="basicInfoList.shopName" size="mini" placeholder="请输入商家简称"></el-input>
                  </el-form-item>
                  <el-form-item label="所属行业">
                    <el-input v-model="basicInfoList.shopClassify" size="mini" placeholder="请输入商家简称"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="商家编号">
                    <el-input v-model="basicInfoList.shopCode" size="mini" :disabled="true" placeholder="请输入商家编号"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话">
                    <el-input v-model="basicInfoList.serviceTel" size="mini" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="16">
                  <!--                  <el-form-item label="所属商圈">-->
                  <!--                    <el-input size="mini" placeholder=""></el-input>-->
                  <!--                  </el-form-item>-->
                  <el-form-item label="商家详细地址">
                    <el-cascader
                      ref="address"
                      size="large"
                      :options="optionProps"
                      v-model="selectedOptions"
                      @change="handleChange">
                    </el-cascader>
                  </el-form-item>
                  <el-form-item label="商家logo">
                    <el-upload
                      class="avatar-uploader"
                      action="http://www.ccppvip.com:8081/upload"
                      :show-file-list="false"
                      :on-success="handleLogoSuccess">
                      <img width="50%" v-if="basicInfoList.shopImg" :src="basicInfoList.shopImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="商家分配比例">
                    <el-input v-model="basicInfoList.scale" size="mini" placeholder="请输入分配比例"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="养老金分配比例">
                    <el-input v-model="basicInfoList.pensionScale" size="mini" placeholder="请输入分配比例"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div>
            <div class="table-footer">
              <el-row>
                <el-col>商户认证信息</el-col>
              </el-row>
            </div>
            <div class="item-content">
              <el-row>
                <el-col :span="16">
                  <el-form-item label="商户全称">
                    <el-input v-model="qualityList.blisName" size="mini" placeholder="请输入商家全称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-col :span="8">
                    <el-form-item label="法人姓名">
                      <el-input v-model="qualityList.larName" size="mini" placeholder="请输入法人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="商户类型">
                      <el-select v-model="qualityList.shopGenre" placeholder="请选择" style="width:100%">
                        <el-option
                          v-for="item in shopTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          <span style="float: left">{{ item.label }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="身份证">
                      <el-upload
                        class="avatar-uploader"
                        action="http://www.ccppvip.com:8081/upload"
                        :show-file-list="false"
                        :on-success="handleIdFrontSuccess">
                        <img width="50%" v-if="qualityList.sfzPositive" :src="qualityList.sfzPositive" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                      <el-upload
                        class="avatar-uploader"
                        action="http://www.ccppvip.com:8081/upload"
                        :show-file-list="false"
                        :on-success="handleIdBackSuccess">
                        <img width="50%" v-if="qualityList.sfzBack" :src="qualityList.sfzBack" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="法人身份证号">
                      <el-input v-model="qualityList.larCode" size="mini" placeholder="请输入法人身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照编号">
                      <el-input v-model="qualityList.bankCode" size="mini" placeholder="请输入营业执照编号"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照">
                      <el-upload
                        class="avatar-uploader"
                        action="http://www.ccppvip.com:8081/upload"
                        :show-file-list="false"
                        :on-success="handleLicenseSuccess">
                        <img width="50%" v-if="qualityList.license" :src="qualityList.license" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-col>


              </el-row>
            </div>
          </div>
          <div>
            <div class="table-footer">
              <el-row>
                <el-col>商家结算信息</el-col>
              </el-row>
            </div>
            <div class="item-content">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="开户名">
                    <el-input v-model="qualityList.bankName" size="mini" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="开户行">
                    <el-input v-model="qualityList.bank" size="mini" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="结算类型">
                    <el-select v-model="qualityList.accountType" placeholder="请选择" style="width:100%">
                      <el-option
                        v-for="item in accountList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="银行卡号">
                    <el-input v-model="qualityList.bankCode" size="mini" placeholder="请输入银行卡号"></el-input>
                  </el-form-item>
                </el-col>

                <el-col>
                  <!--                      <el-col :span="9">-->
                  <!--                        <el-button type="info">返回</el-button>-->
                  <!--                      </el-col>-->
                  <el-col class="btn">
                    <el-button type="primary" @click="getSubmit">保存</el-button>
                  </el-col>
                </el-col>
              </el-row>
            </div>


          </div>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import {businessInfoList, changEdit, queryAddress} from '../../api/api'


export default {
  data () {
    return {
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'child'
      },
      selectedOptions: [],
      basicInfoList: {
        province: '',
        city: '',
        county: ''
      },
      qualityList: {},
      value: '',
      accountList: [{
        value: '1',
        label: '对公'
      }, {
        value: '2',
        label: '对私'
      }],
      shopTypeList: [{
        value: '1',
        label: '个体'
      }, {
        value: '2',
        label: '企业'
      }],
      formData: {
        businessName: '',
        businessType: '',
        businessCity: '',
        businessPhone: '',
        businessScale: ''
      },
      infoData: {
        userId: sessionStorage.getItem('userId'),
        shopId: ''
      },
      adminId: sessionStorage.getItem('userId'),
      json: []
    }
  },
  created () {
    console.log(this.$route.params.formData)
    if (this.$route.params.formData) {
      this.formData = this.$route.params.formData
      this.infoData.shopId = this.$route.params.formData.shopId
      sessionStorage.setItem('shopId', this.infoData.shopId)
    } else {
      this.formData = []
      this.infoData.shopId = sessionStorage.getItem('shopId')
    }
  },
  mounted () {
    this.getInfoList()
    this.getAddAds()
  },
  computed: {
    accountType: {
      get: function() {
        return this.qualityList.accountType === '1' ? '对公' : '对私'
      }
    }
    // adress: {
    //   get () {
    //     return this.basicInfoList.city + this.basicInfoList.county + this.basicInfoList.address
    //   },
    //   set (val) {
    //     this.adress = val
    //   }
    // }
  },
  methods: {
    handleLogoSuccess (res, file) {
      console.log(JSON.parse(res.slice(5)).data)
      this.basicInfoList.shopImg = URL.createObjectURL(file.raw)
      this.basicInfoList.shopImg = JSON.parse(res.slice(5)).data.split('?')[0]
    },
    handleIdFrontSuccess (res, file) {
      this.qualityList.sfzPositive = URL.createObjectURL(file.raw)
      this.qualityList.sfzPositive = JSON.parse(res.slice(5)).data.split('?')[0]
    },
    handleIdBackSuccess (res, file) {
      this.qualityList.sfzBack = URL.createObjectURL(file.raw)
      this.qualityList.sfzBack = JSON.parse(res.slice(5)).data.split('?')[0]
    },
    handleLicenseSuccess (res, file) {
      this.qualityList.license = URL.createObjectURL(file.raw)
      this.qualityList.license = JSON.parse(res.slice(5)).data.split('?')[0]
    },
    getInfoList () {
      const para = Object.assign({}, this.infoData)
      businessInfoList(para).then(res => {
        console.log(res)
        this.basicInfoList = res.data.shop
        this.qualityList = res.data.shopData
        this.selectedOptions = [res.data.shop.city, res.data.shop.county, res.data.shop.address]
        console.log(this.selectedOptions)
      })
    },
    getSubmit () {
      const para = Object.assign({}, this.basicInfoList, this.qualityList, { adminId: this.adminId })
      console.log(para)
      changEdit(para).then(res => {
        console.log(res)
      })
    },
    queryAddress() {
      queryAddress().then(res => {
        this.optionProps = res.data;
      })
    },
    handleChange (value) {
      let labels = this.$refs['address'].getCheckedNodes()[0].pathLabels;
      this.basicInfoList.province = labels[0];
      this.basicInfoList.city = labels[1] === '全部' ? '' : labels[1];
      this.basicInfoList.county = labels[2] === '全部' ? '' : labels[2];
    }
  },
  components: {
    pagination
  }
}
</script>
<style lang="scss">
  .item-content {
    margin: 20px 0 0 0;

    .btn {
      margin: 20px 0;
      text-align: center;
    }
  }

</style>
